<template>
  <div class="confirm">
    <van-nav-bar
      title="确认订单"
      left-arrow
      @click-left="onClickLeft"
      fixed
      class="navbar"
    />
    <!-- 选择地址 -->
    <div class="address card" @click="editAddress">
      <div class="icon">
        <van-icon name="location" color="#ff4a03" size=".3rem" />
      </div>
      <div class="add-center">
        <h3>
          <span>党乃茵</span>
          <i>13702054005</i>
        </h3>
        <p>回复的撒娇快发货快第三发的说法回复的撒娇快发货快第三发的说法</p>
        <div class="tips">收获不便时,可选择暂存服务</div>
      </div>
      <div class="add-right">
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- 订单详情 -->
    <div class="card order" v-for="item in orderList" :key="item.goodsId">
      <van-card
        :num="item.num"
        :price="item.marketPriceStr"
        :desc="item.introduce"
        :title="item.title"
        :thumb="item.imageUrl"
      >
        <template #tags>
          <van-tag plain type="danger">七天无理由退还</van-tag>
          <van-tag plain type="danger">{{ item.discountBenefitStr }}</van-tag>
        </template>
      </van-card>
      <div class="order-center">
        <div class="order-item">
          <h3>配送方式</h3>
          <h6>普通配送</h6>
          <div>
            <span>快递 免邮</span>
            <van-icon name="arrow" class="mid" />
          </div>
        </div>
        <div class="order-item">
          <h3>运险费</h3>
          <h6>退换货可赔付7元</h6>
          <div>
            <span>卖家赠送</span>
            <van-icon name="arrow" class="mid" />
          </div>
        </div>
        <div class="order-item">
          <h3>店铺优惠</h3>
          <h6>暂无</h6>
          <div>
            <span></span>
            <van-icon name="arrow" class="mid" />
          </div>
        </div>
        <div class="order-item">
          <h3>开具发票</h3>
          <h6></h6>
          <div>
            <span>本次不开具发票</span>
            <van-icon name="arrow" class="mid" />
          </div>
        </div>
        <div class="order-item">
          <h3>订单备注</h3>
          <h6>
            <input type="text" placeholder="选填,请先和商家协商" />
          </h6>
          <div></div>
        </div>
        <div class="order-item3">
          <span class="num">共{{ item.num }}件</span>
          <i class="xiaoji">小计：</i>
          <em>￥{{ item.numtotal }}</em>
        </div>
      </div>
    </div>

    <van-submit-bar :price="priceAll" button-text="提交订单" @submit="onSubmit" />

    <!-- 付款 -->
    <van-action-sheet v-model="show" title="付款详情" @close="cancelPay">
      <div class="content">￥{{ priceTotal }}</div>
      <van-cell-group>
        <van-cell title="支付宝账号" value="137****4005" />
        <van-cell title="付款方式" is-link value="余额宝" />
        <div class="btn">
          <van-button size="large" color="#1989fa" @click="payHandle">立即付款</van-button>
        </div>
      </van-cell-group>
    </van-action-sheet>
  </div>
</template>

<script>
import Vue from "vue";
import { addOrder, deleteCart } from "@/api/cart.js";
import {
  getGoodsList,
  addCart,
  editCartList,
  editGoodsList,
} from "@/api/goods.js";
import {
  NavBar,
  SubmitBar,
  Icon,
  Card,
  Cell,
  CellGroup,
  Toast,
  Dialog
} from "vant";

Vue.use(NavBar);
Vue.use(SubmitBar);
Vue.use(Icon);
Vue.use(Card);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Toast);
Vue.use(Dialog);
export default {
  data() {
    return {
      orderList: [],
      priceAll: 0,
      show: false,
      goodsItem: {},
      priceTotal: 0,
    };
  },
  async created() {
    //传过来的id列表
    let orderIdList = this.$route.query;
    //遍历每一个id请求加入订单的商品列表
    for (let o in orderIdList) {
      let rs = await getGoodsList({
        goodsId: orderIdList[o],
      });
      this.orderList.push(rs.data[0]);
    }
    //计算每个订单的总价
    this.$nextTick(() => {
      var totalprice = 0;
      this.orderList.forEach((item) => {
          item.numtotal=item.num*item.marketPriceStr
          totalprice += item.numtotal;
      });
      this.priceAll = totalprice * 100;
      this.priceTotal = totalprice.toFixed(2);
    });
  },
  computed: {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit() {
      this.show = true;
    },
    //提交订单
    payHandle() {
      Dialog.confirm({
        title: "确认付款",
        message: "￥" + this.priceTotal
      })
        .then(() => {
          addOrder({
            list: this.orderList,
            status: "2"
          });
          this.orderList.forEach(item => {
            deleteCart(item.id);
          });

          this.$router.push("/redwine/user");
        })
        .catch(() => {
          addOrder({
            list: this.orderList,
            status: "1",
          });
          this.orderList.forEach(async (item) => {
            await deleteCart(item.id);
            // item.num = 0
            // await editGoodsList(item)
          });
          this.$router.push("/redwine/user");
        });
    },
    //取消付款
    async cancelPay() {
      console.log(0);
    },
    //修改地址
    editAddress() {
      this.$router.push("/address");
    },
  },
};
</script>

<style lang="stylus" scoped>
.confirm
    background #f2f2f2
    width 100%
    min-height 100%
    padding-top .05rem
    padding-bottom .5rem
    .card
        width 95%
        margin  0rem auto .1rem
        border-radius  .1rem
        background  #ffffff
    .address
        margin-top .56rem
        height 1.2rem
        display flex
        .icon
            width .4rem
            display flex
            align-items center
            justify-content center

  .card {
    width: 95%;
    margin: 0rem auto 0.1rem;
    border-radius: 0.1rem;
    background: #ffffff;
  }

  .address {
    margin-top: 0.56rem;
    height: 1.2rem;
    display: flex;

    .icon {
      width: 0.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .add-center {
      flex: 1;

      h3 {
        margin-top: 0.1rem;
        line-height: 0.4rem;

        i {
          color: #aaaaaa;
          margin-left: 0.1rem;
          font-weight: normal;
        }
      }

      p {
        line-height: 0.2rem;
        font-size: 0.13rem;
      }

      .tips {
        margin-top: 0.05rem;
        color: #ff0000;
        font-size: 0.12rem;
      }
    }

    .add-right {
      width: 0.3rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .order {
    height: 3.5rem;
    padding-top: 0.1rem;

    .van-card {
      background: #fff;
    }

    .order-center {
      width: 100%;

      .order-item {
        line-height: 0.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.12rem;

        h3 {
          width: 0.7rem;
          margin-left: 0.3rem;
          font-weight: normal;
        }

        h6 {
          flex: 1;
          font-weight: normal;
          color: #b7b7b7;

          input {
            border: 0;
          }
        }

        div {
          text-align: right;
          margin-right: 0.1rem;
          width: 1.2rem;

          span {
            margin-right: 0.1rem;
          }

          .mid {
            vertical-align: middle;
          }
        }
      }

      .order-item3 {
        width: 100%;
        text-align: right;
        padding-right: 0.1rem;
        font-size: 0.12rem;

        .num {
          color: #b6b6b6;
          margin-right: 0.05rem;
        }

        em {
          color: #db6824;
        }
      }
    }
  }
  >>> .van-icon-arrow-left{
    color:#fb4a30
}
</style>
